<template>
  <div class="container">
   <el-button-group>
    <el-button type="primary" :plain='currSelect1'  @click="changeTag(1)" style="width:100px;">处方</el-button>
    <el-button type="primary" :plain='currSelect2'  @click="changeTag(2)" style="width:100px;">病例</el-button>
 </el-button-group >
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
        <div class="from">
           <el-form-item label="患者姓名：" prop="name">
              <el-input v-model="ruleForm.name" style="width:270px;height:40"></el-input>
         </el-form-item>
        <el-form-item   prop="card">
           <p>患者卡号：</p>
            <el-input v-model="ruleForm.card" style="width:270px;height:40"></el-input>
        </el-form-item>
        <el-form-item label="患者年龄："  prop="age">
            <el-input v-model="ruleForm.age" style="width:270px;height:40"></el-input>
        </el-form-item>
        <el-form-item label="出生日期："  prop="date">
            <el-input v-model="ruleForm.date" style="width:270px;height:40"></el-input>
        </el-form-item>
    </div>
    <div class="from">
       <el-form-item label="性别"  prop="region">
            <el-select v-model="ruleForm.region"  style="width:270px;height:40">
              <el-option label="男" value="shanghai"></el-option>
              <el-option label="女" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item  prop="tel">
            <p>手机号码：</p>
            <el-input v-model="ruleForm.tel" style="width:270px;height:40"></el-input>
        </el-form-item>
        <el-form-item  prop="idcard">
            <p>证件号码：</p>
            <el-input v-model="ruleForm.idcard" style="width:270px;height:40"></el-input>
        </el-form-item>
        <el-form-item label="接诊类型："  prop="type">
          <el-input v-model="ruleForm.type" style="width:270px;height:40"></el-input>
       </el-form-item>
    </div>
    <div class="from">
       <el-form-item prop="address">
        <p>地址：</p>
            <el-cascader
                v-model="ruleForm.address"
                :options="options" style="width:270px;height:40"></el-cascader>
        </el-form-item>
         <el-form-item class="child">
          <p>患者病史：</p>
          <el-input style="width:500px;height:40"></el-input>
       </el-form-item>
    </div>
     <div class="from">
         <el-form-item label="诊断：" prop="diagnose">
          <el-input style="width:600px;height:40"></el-input>
       </el-form-item>
       <el-form-item>
          <p>医疗：</p>
          <el-input style="width:600px;height:40"></el-input>
       </el-form-item>
    </div>
</el-form>
  </div>
</template>

<script>
import area from '../../../assect/area.json'
export default {
 data() {
      return {
        currSelect1:false,
        currSelect2:true,
        options:area,
        ruleForm: {
          name: '',
          region: '',
        },
        rules: {
          name: [
            { required: true, message: '请输入患者姓名', trigger: 'blur' },
          ],
           age: [
            { required: true, message: '请输入患者年龄', trigger: 'blur' },
          ],
          date: [
            { required: true, message: '请输入出生日期', trigger: 'blur' },
          ],
           type: [
            { required: true, message: '请输入接诊类型', trigger: 'blur' },
          ],
           diagnose: [
            { required: true, message: '请输入接诊类型', trigger: 'blur' },
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ]
        }
      };
    },
    methods:{
        changeTag(num){
      if(num == 1){
        this.currSelect1=false;
        this.currSelect2=true;
      }else{
        this.currSelect2=false;
        this.currSelect1=true;
      }
    }
    }
}
</script>

<style lang="less" scoped>
.container{
    // width: 1250px;
    // height: 400px;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    .from{
        margin-top: 15px;
        display: flex;
        justify-content: space-between;
        .child{
          margin-left: 55px;
          flex:1;
        }
    }
    
}

</style>